<script lang="ts" setup>
import { ref, reactive, computed } from "vue";
import { CaretBottom, Select, Close } from "@element-plus/icons-vue";
import flag2 from "../assets/flag2.svg";
import Warn from "../assets/warn.svg";
import Pic from "../assets/pic.svg";
import Error from "../assets/error.svg";
import Cclose from "../assets/close.svg";
import Pic1 from "../assets/pic1.svg";
import Pic2 from "../assets/pic2.svg";
import Pic3 from "../assets/pic3.svg";
import Pic4 from "../assets/pic4.svg";
import Footer from "./footer.vue";

const allchecked = computed({
  get() {
    return tableData
      .filter((item) => item.type !== "done")
      .every((item) => {
        return item.checked;
      });
  },
  set(val) {
    if (val) {
      tableData.forEach((item) => {
        item.checked = true;
      });
    } else {
      tableData.forEach((item) => {
        item.checked = false;
      });
    }
  },
});
const tableHeader = reactive([
  {
    text: "订单",
    key: "order",
    minWidth: "239px",
  },
  {
    text: "配送地址",
    key: "adress",
    minWidth: "130px",
  },
  {
    text: "产品",
    key: "product",
    minWidth: "270px",
  },
  {
    text: "物流渠道",
    key: "logistics",
    minWidth: "227px",
  },
  {
    text: "操作",
    key: "operation",
    minWidth: "100px",
  },
]);
const arr = Array.from(
  { length: 3 },
  (v, k) =>
    (k = {
      id: k,
      order: "#1003",
      adress: "Randy Mconnell baby qq",
      product: "产品",
      logistics: "渠道",
      operation: "操作",
      checked: false,
    })
);
arr.splice(2, 0, {
  type: "done",
  id: Date.now(),
  order: "#1003",
  adress: "Randy Mconnell baby qq",
  product: "产品",
  logistics: "渠道",
  operation: "操作",
});
const tableData = reactive(arr);
const tableCheckedArr = computed(() => {
  return tableData.filter((item) => item.type !== "done" && item.checked);
});
</script>

<template>
  <div class="order-table">
    <div class="order-table__header">
      <div
        class="order-table__header--col"
        v-for="(header, headerIndex) in tableHeader"
        :key="header.key"
        :style="{
          minWidth:
            tableCheckedArr.length && headerIndex === 0
              ? '381px'
              : header.minWidth,
          justifyContent: headerIndex === 4 ? 'flex-end' : '',
        }"
      >
        <el-checkbox
          v-if="headerIndex === 0"
          v-model="allchecked"
          size="large"
        />
        <div
          class="checked-desc__block"
          v-if="headerIndex === 0 && tableCheckedArr.length !== 0"
        >
          <span class="checked-desc__block--num">
            {{ tableCheckedArr.length }}
          </span>
          <span class="checked-desc__block--desc">条数据已经选中</span>
          <el-button-group style="--el-border-radius-base: 0">
            <el-button>发货</el-button>
            <el-button type="primary">
              标记异常
              <el-icon size="14" style="margin-left: 8px"
                ><CaretBottom color="#fff"
              /></el-icon>
            </el-button>
            <el-button> 申请退款 </el-button>
          </el-button-group>
        </div>
        <span
          v-if="tableCheckedArr.length === 0 || headerIndex !== 0"
          class="order-table__header--text"
        >
          {{ header.text }}
        </span>
      </div>
    </div>
    <div
      class="order-table__body"
      v-for="(row, rowIndex) in tableData"
      :key="row.id"
    >
      <div class="order-table__row--success" v-if="row.type === 'done'">
        <div class="order-table__row--tick">
          <el-icon size="14"><Select color="#5EAE32" /></el-icon>
        </div>
        <div class="order-table__row--detail">
          <div class="desc">
            <span class="num">订单号:#1003</span>
            <span>创建包裹成功，已移动到待打包列表。</span>
          </div>
          <div class="btn" style="--el-border-radius-base: 0">
            <el-button style="--el-button-text-color: #40485f">
              点击查看
            </el-button>
            <img :src="Cclose" />
          </div>
        </div>
      </div>
      <div
        class="order-table__row"
        :style="{ paddingBottom: [0, 3].includes(rowIndex) ? '50px' : '' }"
        v-else
      >
        <div class="order-table__col" v-for="col in tableHeader" :key="col.key">
          <div
            class="order-table__order"
            :style="{
              width: tableCheckedArr.length ? '381px' : '',
            }"
            v-if="col.key === 'order'"
          >
            <el-checkbox v-model="row.checked" size="large" />
            <div class="order-table__order-detail">
              <div class="order-table__order-detail-row">
                <span class="label" style="margin-right: -4px">订单号：</span>
                <el-link class="link" :underline="false">#1003</el-link>
              </div>
              <div class="order-table__order-detail-row">
                <span class="label" style="margin-right: -5px">订单金额：</span>
                <span class="value">122.41 USD</span>
                <el-icon size="15"><CaretBottom color="#CCCCCC" /></el-icon>
              </div>
              <div class="order-table__order-detail-row">
                <span class="label" style="margin-right: -4px">店铺：</span>
                <span class="value">Your Headset-Loja O</span>
                <el-icon size="15"><CaretBottom color="#CCCCCC" /></el-icon>
              </div>
              <div class="order-table__order-detail-row">
                <span class="label">创建时间：</span>
                <span class="value">2022-10-28 10:56:49</span>
              </div>
              <div class="order-table__order-detail-row">
                <span class="label">付款时间：</span>
                <span class="value">2022-12-28 11:17:39</span>
              </div>
            </div>
          </div>
          <div class="order-table__adress" v-if="col.key === 'adress'">
            <div
              :class="[
                'order-table__adress-detail-row',
                { 'order-table__adress-detail-row-s': rowIndex === 3 },
              ]"
            >
              {{ rowIndex === 3 ? "Lynda Young" : "Randy Mconnell baby qq" }}
            </div>
            <div class="order-table__adress-detail-flag">
              <span>
                <img :src="flag2" />
                {{ rowIndex === 3 ? "United States" : "Trinidad and Tobago" }}
              </span>
            </div>
            <div class="order-table__adress-detail-arrow" v-if="rowIndex === 3">
              <span class="text">H2SA8</span>
              <el-icon size="15"><CaretBottom color="#CCCCCC" /></el-icon>
            </div>
            <div class="order-table__adress-detail-flag">
              <img :src="Warn" />
            </div>
          </div>
          <div class="order-table__product" v-if="col.key === 'product'">
            <div class="order-table__product-detail">
              <div class="order-table__product-detail--img">
                <img :src="Pic" />
                <el-link type="error">[申报填写]</el-link>
              </div>
              <div class="order-table__product-detail--right">
                <div class="order-table__product-desc">
                  5 Colors Capes Kids 5XL Wa...
                </div>
                <div class="order-table__product-detail-row">
                  <span class="label">SKU：</span>
                  <el-link class="value link">Default-3</el-link>
                </div>
                <div class="order-table__product-detail-row">
                  <span class="label">型号：</span>
                  <span class="value type">Purple、Kids 110-120</span>
                </div>
                <div
                  class="order-table__product-detail-row"
                  v-if="rowIndex !== 3"
                >
                  <span class="label">售价：</span>
                  <span class="value">234.00 USD</span>
                </div>
                <div class="order-table__product-detail-row">
                  <span class="label">数量：</span>
                  <span
                    :class="['value', 'num']"
                    :style="{ color: rowIndex === 3 ? '#202738' : '' }"
                    >{{ rowIndex === 3 ? "1" : "2" }}</span
                  >
                </div>
                <div class="order-table__product-detail-row">
                  <span class="label">Dog Name：</span>
                  <span class="value">Oscar</span>
                </div>
                <div
                  class="order-table__product-detail-row"
                  v-if="rowIndex === 3"
                >
                  <img :src="Pic1" />
                  <img :src="Pic2" />
                  <img :src="Pic3" />
                </div>
              </div>
            </div>
            <el-divider v-if="rowIndex === 3" />
            <div class="order-table__product-detail" v-if="rowIndex === 3">
              <div class="order-table__product-detail--img">
                <img :src="Pic" />
                <el-link type="error">[申报填写]</el-link>
              </div>
              <div class="order-table__product-detail--right">
                <div
                  class="order-table__product-desc"
                  :style="{ textDecoration: 'underline' }"
                >
                  5 Colors Capes Kids 5XL Wa...
                </div>
                <div class="order-table__product-detail-row">
                  <span class="label">SKU：</span>
                  <el-link class="value" style="font-size: 13px">
                    Default-3
                  </el-link>
                </div>
                <div class="order-table__product-detail-row">
                  <span class="label">型号：</span>
                  <span class="value type">Purple、Kids 110-120</span>
                </div>
                <div class="order-table__product-detail-row">
                  <span class="label">数量：</span>
                  <span class="value num">2</span>
                </div>
                <div class="order-table__product-detail-row">
                  <span class="label">Dog Name：</span>
                  <span class="value">Oscar</span>
                </div>
                <div class="order-table__product-detail-row">
                  <span class="label">Photos：</span>
                </div>
                <div class="order-table__product-detail-row--link link1">
                  https://111111111com/imageh...
                </div>
                <div class="order-table__product-detail-row--link link2">
                  https://111111111com/imagehk
                </div>
                <div class="order-table__product-detail-row">
                  <img :src="Pic4" />
                </div>
              </div>
            </div>
          </div>
          <div class="order-table__logistics" v-if="col.key === 'logistics'">
            <div class="logistics">标准物流</div>
            <div class="type" v-if="rowIndex === 0">
              <div class="text">云途-云途全球专线挂号（特惠普货地对方）</div>
              <el-icon size="15"><CaretBottom color="#CCCCCC" /></el-icon>
            </div>
            <div class="num" v-if="rowIndex === 0">
              4201850592748927005169000010057244
            </div>
            <div class="status" v-if="rowIndex === 0">
              <img :src="Error" />
              上传失败
            </div>
          </div>
          <div
            style="--el-border-radius-base: 0"
            class="order-table__operation"
            v-if="col.key === 'operation'"
          >
            <el-button class="el-button__deliver">发货</el-button>
            <el-button-group size="large">
              <el-button class="text">标记异常</el-button>
              <el-button class="arrow">
                <el-icon size="15"><CaretBottom color="#888888" /></el-icon>
              </el-button>
            </el-button-group>
          </div>
        </div>
        <div class="bottom-info" v-if="[0, 3].includes(rowIndex)">
          <span class="code">3件都发L码</span>
          <span class="time" v-if="[3].includes(rowIndex)">
            2022-10-01 22:32:29
          </span>
          <el-icon size="15"><CaretBottom color="#CCCCCC" /></el-icon>
        </div>
      </div>
    </div>

    <Footer></Footer>
  </div>
</template>

<style lang="scss" scoped>
.order-table {
  width: 100%;
  min-width: fit-content;
  .order-table__header {
    width: 100%;
    height: 40px;
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    background: #edf0f3;
    border: 1px solid #ced5df;
    .order-table__header--col {
      flex: 1;
      padding: 12px;
      display: flex;
      align-items: center;
      .el-checkbox {
        height: 18px;
        margin-right: 8px;
        ::v-deep(.el-checkbox__inner) {
          width: 16px;
          height: 16px;
          &::after {
            left: 5px;
            top: 2px;
          }
        }
      }
      .checked-desc__block {
        display: flex;
        align-items: center;
        .checked-desc__block--num {
          flex-shrink: 0;
          font-family: PingFang SC;
          font-size: 13px;
          font-weight: 400;
          line-height: 18px;
          text-align: left;
          color: #4e0ada;
        }
        .checked-desc__block--desc {
          flex-shrink: 0;
          font-family: PingFang SC;
          font-size: 13px;
          font-weight: 400;
          line-height: 18px;
          text-align: left;
          color: #202738;
          margin-right: 20px;
        }
        .el-button-group {
          flex-shrink: 0;
          & > button:nth-child(1) {
            width: 54px;
            height: 32px;
            padding: 4px 15px 4px 15px;
            font-family: PingFang SC;
            font-size: 12px;
            font-weight: 400;
            line-height: 24px;
            text-align: center;
            color: #091a4b;
          }
          & > button:nth-child(2) {
            width: 96px;
            height: 32px;
            padding: 4px 15px 4px 15px;
            font-family: PingFang SC;
            font-size: 12px;
            font-weight: 400;
            line-height: 24px;
            text-align: center;
            color: #ffffff;
          }
          & > button:nth-child(3) {
            width: 78px;
            height: 32px;
            padding: 4px 15px 4px 15px;
            font-family: PingFang SC;
            font-size: 12px;
            font-weight: 400;
            line-height: 24px;
            text-align: center;
            color: #091a4b;
          }
        }
      }
      .order-table__header--text {
        font-family: PingFang SC;
        font-size: 13px;
        font-weight: 600;
        line-height: 20px;
        color: #7c879e;
      }
      &:last-child {
        text-align: right;
      }
    }
  }
  .order-table__body {
    width: 100%;
    .order-table__row--success {
      border: 1px solid #cfd4de;
      margin: 7px 0;
      display: flex;
      width: 100%;
      box-sizing: border-box;
      .order-table__row--tick {
        width: 47px;
        height: 47px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-right: 1px solid #cfd4de;
      }
      .order-table__row--detail {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 12px;
        .desc {
          font-family: PingFang SC;
          font-size: 12px;
          font-weight: 400;
          line-height: 22px;
          text-align: left;
          color: #40485f;
          .num {
            color: #8791b7;
            margin-right: 4px;
          }
        }
        .btn {
          display: flex;
          align-items: center;
          .el-button {
            width: 72px;
            height: 24px;
            margin-right: 13px;
            background: #e4e7eb;
            font-family: PingFang SC;
            font-size: 12px;
            font-weight: 500;
            line-height: 24px;
            text-align: left;
          }
        }
      }
    }
    .order-table__row {
      border: 1px solid #cfd4de;
      margin: 7px 0;
      display: flex;
      position: relative;
      .order-table__col {
        flex: 1;
        padding: 12px;
      }
      .order-table__order {
        min-width: 239px;
        height: 100%;
        display: flex;
        align-items: flex-start;
        .order-table__order-detail {
          .order-table__order-detail-row {
            display: flex;
            .link {
              font-family: PingFang SC;
              font-size: 13px;
              font-weight: 600;
              line-height: 18px;
              text-align: left;
              color: #202738;
              text-decoration: underline;
              display: inline;
            }
            .label {
              font-family: PingFang SC;
              font-size: 12px;
              font-weight: 400;
              line-height: 18px;
              text-align: left;
              color: #7e879d;
              flex-shrink: 0;
            }
            .value {
              font-family: PingFang SC;
              font-size: 13px;
              font-weight: 400;
              text-align: left;
              color: #202738;
              margin-right: 2px;
            }
          }
        }
        .el-checkbox {
          height: 18px;
          margin-right: 8px;
          ::v-deep(.el-checkbox__inner) {
            width: 16px;
            height: 16px;
            &::after {
              left: 5px;
              top: 2px;
            }
          }
        }
      }
      .order-table__adress {
        min-width: 130px;
        .order-table__adress-detail-row {
          font-family: PingFang SC;
          font-size: 13px;
          font-weight: 600;
          line-height: 18px;
          text-align: left;
        }
        .order-table__adress-detail-row-s {
          font-size: 12px;
        }
        .order-table__adress-detail-flag {
          img {
            vertical-align: middle;
          }
          span {
            font-family: PingFang SC;
            font-size: 13px;
            font-weight: 400;
            line-height: 18px;
            text-align: left;
            color: #202738;
          }
        }
        .order-table__adress-detail-arrow {
          font-family: PingFang SC;
          font-size: 13px;
          font-weight: 400;
          line-height: 18px;
          text-align: left;
          color: #202738;
          .text {
            margin-right: 4px;
          }
        }
      }
      .order-table__product {
        min-width: 270px;
        .el-divider--horizontal {
          margin: 12px 0;
          border-top: 1px dotted #ced4df;
        }
        .order-table__product-detail {
          display: flex;
          justify-content: flex-start;
          .order-table__product-detail--img {
            display: flex;
            flex-direction: column;
            margin-right: 8px;
            img {
              margin-bottom: 4px;
            }
            ::v-deep(.el-link__inner) {
              font-family: PingFang SC;
              font-size: 12px;
              font-weight: 400;
              line-height: 22px;
              text-align: center;
              color: #cb444a;
            }
          }
          .order-table__product-detail--right {
            .order-table__product-desc {
              font-family: PingFang SC;
              font-size: 13px;
              font-weight: 400;
              line-height: 18px;
              text-align: left;
              color: #202738;
            }
            .order-table__product-detail-row {
              display: flex;
              .label {
                font-family: PingFang SC;
                font-size: 12px;
                font-weight: 400;
                line-height: 18px;
                text-align: left;
                color: #7e879d;
                flex-shrink: 0;
              }
              .value {
                font-family: PingFang SC;
                font-size: 13px;
                font-weight: 400;
                line-height: 18px;
                text-align: left;
                color: #202738;
                margin-right: 4px;
              }
              .link {
                font-family: PingFang SC;
                font-size: 13px;
                font-weight: 400;
                line-height: 18px;
                text-align: left;
                color: #202738;
              }
              .type {
                font-family: PingFang SC;
                font-size: 13px;
                font-weight: 600;
                line-height: 18px;
                text-align: left;
                color: #202738;
              }
              .num {
                display: inline-block;
                width: 16px;
                height: 16px;
                border: 1px solid #cfd4de;
                text-align: center;
                line-height: 18px;
                font-family: PingFang SC;
                font-size: 12px;
                font-weight: 600;
                color: #cb444a;
              }
              img {
                margin-right: 4px;
              }
            }
            .order-table__product-detail-row--link {
              font-family: PingFang SC;
              font-size: 12px;
              font-weight: 400;
              line-height: 18px;
              text-align: left;
              text-decoration: underline;
              color: #202738;
              &.link2 {
                margin-bottom: 4px;
              }
            }
          }
        }
      }
      .order-table__logistics {
        min-width: 227px;
        .logistics {
          font-family: PingFang SC;
          font-size: 13px;
          font-weight: 600;
          line-height: 18px;
          text-align: left;
          color: #202738;
          margin-bottom: 18px;
        }
        .type {
          font-family: PingFang SC;
          font-size: 12px;
          font-weight: 400;
          line-height: 18px;
          text-align: left;
          color: #7e879d;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .text {
            max-width: 184px;
          }
        }
        .num {
          font-family: PingFang SC;
          font-size: 13px;
          font-weight: 600;
          line-height: 18px;
          text-align: left;
          color: #202738;
          max-width: 184px;
          word-break: break-all;
        }
        .status {
          font-family: PingFang SC;
          font-size: 12px;
          font-weight: 400;
          line-height: 18px;
          text-align: right;
          color: #cb444a;
          border: 1px solid #cb444a66;
          width: fit-content;
          display: flex;
          align-items: center;
          padding: 0 4px;
          margin-top: 4px;
          img {
            margin-right: 4px;
          }
        }
      }
      .order-table__operation {
        min-width: 100px;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        .el-button__deliver {
          width: 144px;
          height: 38px;
          margin-left: 0;
          margin-bottom: 10px;
          font-family: PingFang SC;
          font-size: 12px;
          font-weight: 600;
          line-height: 24px;
          text-align: left;
          color: #091a4b;
        }
        .el-button-group {
          .text {
            height: 38px;
            width: 113px;
            font-family: PingFang SC;
            font-size: 12px;
            font-weight: 600;
            line-height: 24px;
            text-align: center;
            color: #091a4b;
          }
          .arrow {
            height: 38px;
            width: 32px;
            padding: 0;
          }
        }
      }
      .bottom-info {
        display: flex;
        position: absolute;
        bottom: 12px;
        left: 36px;
        .code {
          font-family: PingFang SC;
          font-size: 13px;
          font-weight: 400;
          line-height: 18px;
          text-align: left;
          color: #3d2ca8;
          margin-right: 4px;
        }
        .time {
          font-family: PingFang SC;
          font-size: 13px;
          font-weight: 400;
          line-height: 18px;
          text-align: left;
          color: #7e879d;
          margin-right: 4px;
        }
      }
    }
  }
}
</style>
